{% import "components/record.html" as record with context %}
{% import "components/problem.html" as problem with context %}
{% extends "layout/basic.html" %}
{% block content %}
  <div class="row">
    <div class="medium-9 columns">
      <div class="section display-mode">
        <div class="section__body no-padding">
          <form method="get" id="searchForm" action="{{ url('problem_main') }}">
            <div class="search">
              <input name="q" type="text" value="{{ qs }}" placeholder="{{ _('Search') }}">
              {% include "partials/problem_stat.html" %}
              <select name="sort" class="search-sort">
                {%- for sortType in ["default", "recent"] -%}
                  <option value="{{ sortType }}" {{ "selected" if sort == sortType else "" }}>{{ _('sort::' + sortType) }}</option>
                {%- endfor -%}
              </select>
              <button type="submit">
                <span class="icon icon-search"></span>
              </button>
            </div>
          </form>
        </div>
        <div class="section__body no-padding">
          {% include "partials/problem_list.html" %}
        </div>
      </div>
    </div>
    <div class="medium-3 columns">
      {% if handler.user.hasPriv(PRIV.PRIV_USER_PROFILE) %}
        <div class="section side nojs--hide">
          <ol class="menu">
            <a href="javascript:;" class="menu__link edit-mode-hide" name="enter-edit-mode">
              <span class="icon icon-edit"></span>
              {{ _('Enter Edit Mode') }}
            </a>
            <a href="javascript:;" class="menu__link display-mode-hide" name="leave-edit-mode">
              <span class="icon icon-edit"></span>
              {{ _('Leave Edit Mode') }}
            </a>
            <div id="problem_selection" class="display-mode-hide"></div>
            {% if handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
              <a href="javascript:;" class="menu__link display-mode-hide" name="hide_selected_problems">
                <span class="icon icon-close"></span>
                {{ _('Hide Selected') }}
              </a>
              <a href="javascript:;" class="menu__link display-mode-hide" name="unhide_selected_problems">
                <span class="icon icon-check"></span>
                {{ _('Unhide Selected') }}
              </a>
              <a href="javascript:;" class="menu__link display-mode-hide" name="download_selected_problems">
                <span class="icon icon-download"></span>
                {{ _('Download Selected') }}
              </a>
              <a href="javascript:;" class="menu__link display-mode-hide" name="delete_selected_problems">
                <span class="icon icon-delete"></span>
                {{ _('Remove Selected') }}
              </a>
            {% endif %}
            <a href="javascript:;" class="menu__link display-mode-hide" name="copy_selected_problems">
              <span class="icon icon-copy"></span>
              {{ _('Copy Selected') }}
            </a>
          </ol>
        </div>
      {% endif %}
      {% if handler.user.hasPerm(perm.PERM_CREATE_PROBLEM) %}
        <div class="section side">
          <div class="section__header">
            <h1 class="section__title">{{ _('Create Problem') }}</h1>
          </div>
          <ol class="menu">
            {%- for item in ui.getNodes('ProblemAdd') -%}
              <a href="{{ url(item.name, item.args) }}" class="menu__link">
                <span class="icon icon-{{ item.args.icon|default('add') }}"></span>
                {{ _(item.args.text) }}
              </a>
            {%- endfor -%}
          </ol>
          <div class="section__body">
            <div class="typo supplementary">
              <p>{{ _('You have permission to create problems for this domain.') }}</p>
            </div>
          </div>
        </div>
      {% endif %}
      <div class="section side">
        <div class="section__header edit-mode-hide">
          <h1 class="section__title">{{ _('Categories') }}</h1>
        </div>
        <div class="section__body">
          {% include "partials/category.html" %}
        </div>
        <div class="section__body edit-mode-hide">
          {% include "partials/problem_lucky.html" %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}